import { Message } from "@arco-design/web-vue";
// import { driver } from "driver.js";
 

// driverObj.highlight({
//   element: ".logo",
//   popover: {
//     description: "这是一个测试"
//   }
// });

function setStorage(key, value) {
  localStorage.setItem(key, value);
}
function getStorage(key) {
  return localStorage.getItem(key);
}

// 步骤元素id
const els = {
  info: "#driver-info",
  setting: "#driver-setting",
  full: "#driver-full",
  head: "#driver-head"
};
const config = {
  showButtons: true,
  doneBtnText: "完成",
  closeBtnText: "关闭",
  prevBtnText: "上一步",
  nextBtnText: "下一步",
  allowClose: true, //点击背景关闭
  disableActiveInteraction: false, // 禁用激活
  showProgress: true, // 显示进度
  progressText: "{{current}} / {{total}}",
  steps: [
    {
      element: els.info,
      popover: {
        title: "消息列表",
        description: "展示部分的进度消息"
      }
    },
    {
      element: els.full,
      popover: {
        title: "全屏",
        description: "点击可切换全屏显示"
      }
    },
    {
      element: els.setting,
      popover: {
        title: "项目配置",
        description: "包含主题颜色和布局显示动画控制等配置项"
      }
    },
    {
      element: els.head,
      popover: {
        title: "头像",
        description: "头像"
      }
    },
    {
      element: "#driver-router-history",
      popover: {
        title: "路由标签",
        description: "打开过的页面都会记录在这里"
      }
    },
    {
      element: ".driver-tag:first-child",
      popover: {
        title: "单条路由记录",
        description: "您可以点击切换 或者右键标签更多操作~~~"
      }
    }
  ]
};

export function handlerDriver(userinfo) {
  if (userinfo) {
    const { id } = userinfo;
    const driverIDList = JSON.parse(getStorage("driver-id") || "[]");
    // 已经经过引导则不再引导
    if (driverIDList.includes(id)) {
      console.log("跳过引导");
      return;
    }

    const driverObj = driver({
      ...config,
      onDestroyStarted(element, setp, { config, state }) {
        const { activeIndex } = state;
        const length = config.steps.length;
        driverObj.destroy();
        if (activeIndex === length - 1) {
          driverIDList.push(id);
          setStorage("driver-id", JSON.stringify(driverIDList));
        }
      }
    });

    driverObj.drive();

    setTimeout(() => {
      driverObj.refresh();
    }, 1000);

    return;
  }
  console.warn("userinfo is null");
  // driverObj.drive()
}
